<script setup>
import { reactive, ref } from 'vue';
// 从 vue-router 中导入 useRouter 函数
import { useRouter } from 'vue-router';
// 获得用于导航的对象(即路由器)
const router = useRouter();

const items = reactive([
    { 
        label: '用户操作', 
        key: 'user-operation', 
        children: [
            { label: '注册用户', key: '/register' },
            { label: '用户登录', key: '/login' },
            { label: '用户列表', key: '/home/list' },
            { label: 'ECharts', key: '/home/echarts' }
        ]
    },
    ,
    { 
        label: '关于我们', 
        key: 'about-us', 
        type: 'group',
        children: [
            { label: '联系我们', key: '111' },
            { label: '版权声明', key: '222' }
        ]
    }
]);

const openKeys = ref(['user-operation'])
const selectedKeys = ref(['login']);

const handleClick = (menuItem) => {
    console.log('path: ', menuItem.key);
    // 编程式导航
    // https://router.vuejs.org/zh/guide/essentials/navigation.html
    router.push( menuItem.key );
}
</script>

<template>
    
    <a-menu mode="inline"
            :items="items"
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            @click="handleClick"
            ></a-menu>

</template>